<template>
  <div class="mod-config">
    <el-form :inline="true" :model="searchForm" @keyup.enter.native="queryList()">
      <div style="    position: absolute;   right: 20px;">
      <el-form-item>
        <el-select v-model="searchForm.bizCode" placeholder="请选择业务系统" style="width: 100%" @change="queryList()">
          <el-option label="全部" value=""></el-option>
          <el-option v-for="(item, index) in dict.BizGroups" :key="index"
                     :label="item.value+':'+item.label" :value="item.value"></el-option>
        </el-select>
      </el-form-item>
      </div>
        <!--      <el-form-item>
              <el-input v-model="searchForm.batchCode" placeholder="批次编号" clearable></el-input>
            </el-form-item>-->
      <el-form-item>
        <el-select v-model="searchForm.batchType" filterable placeholder="请选择批次类型" style="width:100%">
          <el-option label="全部" value=""></el-option>
          <template v-for="(item, index) in dict.BatchType">
            <el-option :label="item.value +': '+ item.label" :value="item.value"></el-option>
          </template>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-select v-model="searchForm.scheduleType" filterable placeholder="请选择执行方式" style="width:100%">
          <el-option label="全部" value=""></el-option>
          <template v-for="(item, index) in dict.ScheduleType">
            <el-option :label="item.value +': '+ item.label" :value="item.value"></el-option>
          </template>
        </el-select>
      </el-form-item>
      <!--      <el-form-item>
              <el-select v-model="searchForm.enabled" filterable placeholder="请选择启用状态" style="width:100%">
                <el-option label="全部" value="" ></el-option>
                <template v-for="(item, index) in DictEnabled">
                  <el-option :label="item.value +': '+ item.label" :value="item.value"></el-option>
                </template>
              </el-select>
            </el-form-item>-->
      <el-form-item>
        <el-button type="primary" @click="queryList(1)">查询</el-button>
        <el-button type="" @click="addEntity()">新增</el-button>
      </el-form-item>
    </el-form>

    <el-table
      :data="dataList"
      border
      v-loading="dataListLoading"
      @row-click="rowClick"
      style="width: 100%;">
      <!--      @selection-change="selectionChangeHandle"-->
      <!--           <el-table-column type="selection" header-align="center" align="center" width="50"></el-table-column>-->

      <!--           <el-table-column prop="id"  label="主键" header-align="center" align="center"></el-table-column>-->
      <!--           <el-table-column prop="bizCode"  label="业务系统编号" header-align="center" align="center"></el-table-column>-->
      <el-table-column prop="batchCode" label="批次编号" header-align="center" align="center" ></el-table-column>
      <el-table-column prop="batchName" label="批次说明" header-align="center" align="center" ></el-table-column>
      <el-table-column prop="batchType" label="类型" header-align="center" align="center">
        <template slot-scope="scope">
          <div style="cursor: pointer;">
          <template v-for="(item, index) in dict.BatchType">
            <el-tag v-if="item.value == scope.row.batchType" :type="item.style">
              {{item.value}}: {{item.label}}
            </el-tag>
          </template>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="scheduleType" label="执行方式" header-align="center" align="center">
        <template slot-scope="scope">
          <div style="cursor: pointer;">
          <template v-for="(item, index) in dict.ScheduleType">
            <el-tag v-if="item.value == scope.row.scheduleType" :type="item.style">
              {{item.value}}: {{item.label}}
            </el-tag>
          </template>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="scheduleConf" label="启动时间配置" header-align="center" align="center">
        <template slot-scope="scope">
          <div @mouseenter="queryNext(scope.row)" @click.stop >
            <el-tooltip class="item" effect="dark" placement="bottom-end">
              <div slot="content" v-html="rowNextText"></div>
              <span>{{scope.row.scheduleConf}}</span>
            </el-tooltip>
          </div>
        </template>
      </el-table-column>
      <!--           <el-table-column prop="orders"  label="序号" header-align="center" align="center"></el-table-column>-->

      <el-table-column prop="startupMaxDelay" label="启动最大延迟(分)" header-align="center" align="center"></el-table-column>
      <el-table-column prop="exeTimeout" label="预估执行时间(分)" header-align="center" align="center"></el-table-column>
      <el-table-column prop="managerP1" label="管理者A" header-align="center" align="center"></el-table-column>
      <!--           <el-table-column prop="managerP2"  label="管理者B" header-align="center" align="center"></el-table-column>-->
      <!--           <el-table-column prop="managerP3"  label="管理者C" header-align="center" align="center"></el-table-column>-->
      <!--           <el-table-column prop="createTime"  label="创建时间" header-align="center" align="center"></el-table-column>-->
      <!--           <el-table-column prop="version"  label="版本号" header-align="center" align="center"></el-table-column>-->
      <!--           <el-table-column prop="updateTime"  label="更新时间戳" header-align="center" align="center"></el-table-column>-->
      <el-table-column prop="enabled" label="启用状态" header-align="center" align="center" >
        <template slot-scope="scope">
          <template v-for="(item, index) in dict.Enabled">
            <el-button size="mini" v-if="item.value == scope.row.enabled" :type="item.style" round @click.stop
                       @click="enableEnity(scope.row)">
              {{item.value}}: {{item.label}}
            </el-button>
          </template>
        </template>
      </el-table-column>


      <el-table-column label="操作" fixed="right" header-align="center" align="center" width="150">
        <template slot-scope="scope">
          <el-button type="text" size="small" @click.stop @click="rowClick(scope.row)">任务管理</el-button>
          <el-button type="text" size="small" @click.stop @click="modEntity(scope.row)">编辑</el-button>
          <!--<el-button type="text" size="small" @click="showDetail(scope.row)">明细</el-button>-->
          <el-button type="text" size="small" @click.stop @click="deleteEntity(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      @size-change="sizeChangeHandle"
      @current-change="currentChangeHandle"
      :current-page="page"
      :page-sizes="[10, 20, 50, 100]"
      :page-size="pageSize"
      :total="totalPage"
      layout="total, sizes, prev, pager, next, jumper">
    </el-pagination>
    <!-- 弹窗, 新增 / 修改 -->
    <add-entity v-if="addEntityVisible" ref="addEntity" @refreshDataList="queryList"></add-entity>
    <mod-entity v-if="modEntityVisible" ref="modEntity" @refreshDataList="queryList"></mod-entity>
    <show-detail v-if="showDetailVisible" ref="showDetail"></show-detail>
  </div>
</template>

<script>
  import AddEntity from './batch-info-add-or-update'
  //import ModEntity from './batch-Info-list-mod'
  // import ShowDetail from './batch-Info-detail'
  import {mapState} from "vuex";

  export default {
    data() {
      return {
        rowNextText: '....加载数据....',
        isShow: false,
        searchForm: {},
        dataList: [],
        page: 1,
        pageSize: 10,
        totalPage: 0,
        dataListLoading: false,
        dataListSelections: [],
        addEntityVisible: false,
        modEntityVisible: false,
        showDetailVisible: false,

      }
    },
    components: {
      AddEntity //, ModEntity, ShowDetail
    },
    activated() {
      this.queryList()
    },
    computed: mapState({
      // listType: state => state.goods.listType
    }),
    mounted() {
      // 数据字典查询
      //this.getSelectDict('FlowType').then((res) => {
      //  this.$store.commit('goods/updateListType', res)
      //})
    },
    methods: {
      // 获取数据列表
      queryList(clr) {
        if (typeof (clr) != 'undefined') {
          this.page = 1
        }
        this.dataListLoading = true
        let obj = {
          'page': this.page,
          'size': this.pageSize,
          //isTrans: true,
          //transParams: ['FlowType', 'ApplyResult', 'ReceiveStatus'],
          //transDict: ['flowType', 'applyResult', 'receiveStatus']
        }
        obj = Object.assign(obj, this.searchForm)
        this.getTableList('/api/batchInfo/list', obj, (data) => {
          this.dataListLoading = false
          if (data.code == '000000' && data.rows && data.rows.length > 0) {
            this.dataList = data.rows
            this.totalPage = data.total
          } else {
            this.dataList = []
            this.totalPage = 0
          }
        })
      },
      // 每页数
      sizeChangeHandle(val) {
        this.pageSize = val
        this.page = 1
        this.queryList()
      },
      // 当前页
      currentChangeHandle(val) {
        this.page = val
        this.queryList()
      },
      // 多选
      selectionChangeHandle(val) {
        this.dataListSelections = val
      },
      rowClick(row){
        let rowData = Object.assign({}, row)
        this.$router.push({ name: 'task-config' , params: rowData});
      },
      // 新增
      addEntity() {
        this.addEntityVisible = true
        this.$nextTick(() => {
          this.$refs.addEntity.init()
        })
      },
      // 修改
      modEntity(row) {
        let cloneData = Object.assign({}, row)
        this.addEntityVisible = true
        this.$nextTick(() => {
          this.$refs.addEntity.init(cloneData.id, cloneData)
        })
      },
      showDetail(row) {
        let cloneData = Object.assign({}, row)
        this.showDetailVisible = true
        this.$nextTick(() => {
          this.$refs.showDetail.init(cloneData)
        })
      },
      enableEnity(row) {
        let obj = {"id": row.id}
        this.getTableList('/api/batchInfo/enable', obj, (res) => {
          if (res && res.code === '000000') {
            row.enabled = res.enabled;
            this.$message({
              message: '操作成功',
              type: 'success',
              duration: 1000,
              onClose: () => {
                //this.queryList()
              }
            })
          } else {
            this.$message.error(res.msg)
          }
        })
      },
      queryNext(row){
        this.rowNextText = '...加载中...';
        let obj = {
          'bizCode': row.bizCode,
          'batchCode': row.batchCode
        }
        this.getTableList('/api/batchInfo/nextTime', obj, (data) => {
          if (data.code == '000000' && data.nextTimes && data.nextTimes.length > 0) {
            let rs = "";
            data.nextTimes.forEach(it=>{
              rs = rs + it + "<br/>";
            });
            this.rowNextText = rs;
          }
        })
      },
      // 删除
      deleteEntity(id) {
        var ids = id ? [id] : this.dataListSelections.map(item => {
          return item.id
        })
        this.$confirm(`确定对[id=${ids.join(',')}]进行删除操作?`, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          let obj = {"ids": ids}
          this.getTableList('/api/batch-Info-listDel', obj, (res) => {
            if (res && res.code === '000000') {
              this.$message({
                message: '操作成功',
                type: 'success',
                duration: 1000,
                onClose: () => {
                  this.queryList()
                }
              })
            } else {
              this.$message.error(res.msg)
            }
          })
        })
      }
    }
  }
</script>